<template>
  <div class="job-list-container">
    <!-- 顶部区域 -->
    <div class="header">
       <!-- 标题栏 -->
     <div class="title">
        <img src="@/assets/images/gongwenbao.png" alt="">
        <span 
          class="main-title"
          :class="{ active: isActive }"
          @click="toggleActive('main')"
        >
          一站求职
        </span>
        <span 
          class="sub-title"
          :class="{ active: isSubActive }"
          @click="toggleActive('sub')"
        >
          校招专场
        </span>
      </div>
      <!-- 标签页 -->
      <div class="tabs">
        <e-button
          v-for="tab in tabs"
          :key="tab.value"
          :class="{ active: activeTab === tab.value }"
          @click="selectTab(tab.value)"
          class="tab-button"
        >
          {{ tab.label }}
        </e-button>
      </div>

      <!-- 搜索栏 -->
      <div class="search-bar">
        <div class="search-input-wrapper">
          <i class="search-icon">🔍</i>
          <input
            v-model="searchKeyword"
            placeholder="搜索职位名称、公司名称关键字..."
            class="search-input"
            @keyup.enter="searchJobs"
          />
        </div>
        <div >
          <el-select 
            v-model="selectedCity" 
            class="city-select"
            placeholder="所有城市"
            clearable
            filterable
          >
            <el-option
            
              v-for="city in cities"
              :key="city.code"
              :label="city.name"
              :value="city.code"
            />
          </el-select>
        </div>
        <button @click="searchJobs" class="search-button">
          <i class="search-icon2">🔍</i> 搜索
        </button>
      </div>

      <!-- 总数提示 -->
      <div class="total-count">
        共找到 <span class="count">{{ count }}</span> 个职位
      </div>
    </div>

    <!-- 职位列表 -->
    <div class="job-list">
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="error" class="error">{{ error }}</div>
      <div v-else>
        <div class="job-items">
          <div
            v-for="job in jobs"
            :key="job.job_id"
            class="job-card-container"
          >
            <div class="job-card"   @click="applyJob(job)">
              <!-- 顶部信息区域 -->
              <div class="job-header">
                <div class="job-title-section">
                  <h2 class="job-title">{{ job.title }}</h2>
                  <div class="company-info">
                    <el-icon><OfficeBuilding /></el-icon>{{ job.company_name }}·
                      <el-icon><Location /></el-icon>{{ job.city }}
                  </div>
                </div>
                <div class="salary-tag">
                <span v-if="job.salary_text" class="salary">{{ job.salary_text }}</span>
                  <span v-if="job.job_type" class="salary">{{ job.job_type }}</span>
                  <span v-if="job.exp" class="education">{{ job.exp }}</span>
                </div>
              </div>

              <!-- 岗位职责 -->
              <div class="job-section">
                <!-- <h3 class="section-title">岗位职责</h3> -->  
                <p class="section-content">
                  {{ job.job_summary || '暂无详细描述' }}
                </p>
              </div>

          

              <!-- 底部信息 -->
              <div class="job-footer">
                <div class="publish-time">{{ formatPublishTime(job.publish_time) }}发布</div>
                <div class="action-buttons">
                   来源: {{ job.source }}
                  <!-- <button @click="applyJob(job)" class="apply-btn">立即申请</button> -->
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页组件 -->
        <div class="pagination">
          <button
            :disabled="currentPage === 1"
            @click="goToPage(currentPage - 1)"
            class="page-btn"
          >
            上一页
          </button>
          <span class="page-info">
            第 {{ currentPage }} 页，共 {{ totalPages }} 页
          </span>
          <button
            :disabled="currentPage === totalPages"
            @click="goToPage(currentPage + 1)"
            class="page-btn"
          >
            下一页
          </button>
        </div>

        <!-- <div class="job-count">共 {{ count }} 个职位</div> -->
      </div>
    </div>
  </div>
</template>
<script>
import { JobApi } from '@/utils/api'
import regionData from '@/assets/region-data.json'

export default {
  name: 'JobList',
  data() {
    return {
       isActive: true,
      isSubActive: false,
      jobs: [],
      count: 0,
      loading: true,
      error: null,
      currentPage: 1,
      pageSize: 21,
      searchKeyword: '',
      selectedCity: '',
      activeTab: 'all',
      tabs: [
        { label: '所有职位', value: '' },
        { label: '后端开发', value: '后端开发' },
        { label: '前端开发', value: '前端开发' },
        { label: '客户端开发', value: '客户端开发' },    
        { label: '测试', value: '测试' },
        { label: '数据', value: '数据' },
         { label: '运维', value: '运维' },
        { label: '人工智能/算法', value: '人工智能/算法' },
        { label: '研发工程师', value: '研发工程师' },
         { label: '销售技术支持', value: '销售技术支持' },
      
      ],
      provinces: [],
      cities: [],
      districts: []
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.count / this.pageSize);
    }
  },
  async mounted() {
    this.provinces = regionData;
    this.cities = this.provinces.flatMap(p => p.list || []);
    await this.fetchJobs();
  },
  methods: {
    async fetchJobs() {
      try {
        this.loading = true;
        const params = {
          skip: (this.currentPage - 1) * this.pageSize,
          limit: this.pageSize
        };

        if (this.searchKeyword) {
          params.keyword = this.searchKeyword;
        }

        if (this.selectedCity) {
          const city = this.cities.find(c => c.code === parseInt(this.selectedCity));
          if (city) {
            params.city = city.name.replace('市', '');
          }
        }

        if (this.activeTab !== 'all') {
          params.keyword = this.activeTab;
        }

        const response = await JobApi.getJobList(params);
        this.jobs = response.data;
        this.count = response.count;
        this.error = null;
      } catch (err) {
        this.error = '获取职位列表失败';
        console.error('Failed to fetch jobs:', err);
      } finally {
        this.loading = false;
      }
    },
     toggleActive(type) {
          if (type === 'main') {
            this.isActive = true;
            this.isSubActive = false;
          } else {
            this.isActive = false;
            this.isSubActive = true;
          }
        },
    formatPublishTime(publishTime) {
      const now = new Date();
      const date = new Date(publishTime);
      const diffInHours = (now - date) / (1000 * 60 * 60);

      if (diffInHours < 24) {
        return `${Math.floor(diffInHours)}小时前发布`;
      } else {
        return date.toLocaleDateString('zh-CN');
      }
    },

    async goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
        await this.fetchJobs();
      }
    },

    viewDetail(job) {
      alert(`查看 ${job.title} 的详情`);
      // 可跳转到详情页
    },

    applyJob(job) {
      // 打开职位详情页面
      if (job.job_url) {
        window.open(job.job_url, '_blank');
      }
    },

    searchJobs() {
      this.currentPage = 1;
      this.fetchJobs();
    },
    selectTab(tabValue) {
      this.activeTab = tabValue;
      this.currentPage = 1;
      this.fetchJobs();
    }
  }
};
</script>
<style scoped>
.job-list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title { 
  display: flex;
  align-items: center;
}

.title img { 
  width: 50px;
  margin-right: 10px;
}


.main-title {
  font-size: 18px;
  color: #333;
 
  position: relative;
  cursor: pointer;

}

.sub-title {
  font-size: 18px;
  color: #666;
  margin-left: 16px;
  position: relative;
  cursor: pointer;
}

/* 选中状态样式 */
.main-title.active,
.sub-title.active {
  font-weight: bold;
  color: #007bff;
}

/* 底部蓝色横线 */
.main-title::after,
.sub-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.main-title.active::after,
.sub-title.active::after {
  width: 100%;
}

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab-button {
  padding: 6px 12px;
  background-color: #f0f0f0;
 
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.tab-button.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.tab-button:hover:not(.active) {
  background-color: #e0e0e0;
}

.search-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.search-input-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #999;
  font-size: 16px;
}

.search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

.city-select-wrapper {
  min-width: 150px;
}




/* 避免 el-select 内部元素产生额外边框 */
.el-select__wrapper {
  border: none !important;
  height: 38px !important;
  padding: 0 12px !important;
}


.city-select {
  height: 38px;
  
  border-radius: 8px;
}

/* 使用 :deep() 修改内部元素的高度和边框 */
:deep(.el-select__wrapper) {
  height: 38px !important;
  border: none !important;
  padding: 0 12px !important;
}

/* 确保输入框本身也匹配高度 */
:deep(.el-input__inner) {
  height: 38px !important;
  line-height: 38px;
  padding: 0;
  border: none;
}


.search-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.search-button:hover {
  background-color: #0056b3;
}

.total-count {
  text-align: right;
  color: #666;
  font-size: 14px;
  margin-top: 8px;
}

.count {
  font-weight: bold;
  color: #007bff;
}

.job-list {
  padding: 20px 0;
}

.job-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.job-card-container {
  margin: 0 auto;
  width: 100%;
  margin-bottom: 10px;
}

.job-card {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.job-card:hover {
  border-color: #1890ff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.job-header {
  padding: 16px 20px 10px 20px;

  align-items: flex-start;
}

.job-title-section {
  flex: 1;
  margin-bottom: 10px;
}

.job-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.company-info {
  font-size: 14px;
  color: #666;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.salary-tag {
 
  gap: 8px;
}

.salary {
  background-color: #1890ff;
  color: white;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 10px;
}

.education {
  background-color: #28b346;
  color: white;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.job-section {
 
   padding: 0px 20px 10px 20px;
}

.job-section:last-of-type {
  border-bottom: none;
  flex: 1;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.section-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-footer {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fafafa;
  margin-top: auto;
}

.publish-time {
  font-size: 13px;
  color: #999;
}

.action-buttons {
  display: flex;
  gap: 10px;
  color: #1890ff;
}

.detail-btn {
  border: 1px solid #d9d9d9;
  color: #666;
  background: white;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.detail-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.apply-btn {
  background-color: #1890ff;
  border: none;
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.apply-btn:hover {
  background-color: #40a9ff;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 30px 0;
}

.page-btn {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.page-btn:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.page-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.page-info {
  font-size: 14px;
  color: #666;
}

.job-count {
  text-align: center;
  margin-top: 20px;
  color: #666;
}

@media (max-width: 768px) {
  .header {
    padding: 16px;
  }
  .job-items {
    grid-template-columns: 1fr;
  }

  .title {
    font-size: 20px;
  }

  .search-bar {
    flex-direction: column;
    gap: 8px;
  }

  .search-input-wrapper {
    width: 100%;
  }

  .city-select-wrapper {
    width: 100%;
  }

  .search-button {
    width: 100%;
  }

  .tabs {
    flex-direction: column;
  }

  .tab-button {
    width: 100%;
  }


  .job-header {
    flex-direction: column;
    gap: 12px;
  }

  .salary-tag {
    align-self: flex-start;
    align-items: flex-start;
  }

  .job-footer {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .action-buttons {
    width: 100%;
    justify-content: flex-end;
  }
}
</style>